<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加/修改页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .el-input.is-disabled .el-input__inner,.el-tag.el-tag--info {
            color: #606266;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="add">
            <div class="header">
                <span>{{ action === 'Add' ? '添加' : (action === 'Modify' ? '修改并重新提交' : '查看') }}求购商品</span>
            </div>
            <div class="main" style="padding: 0 15px;">
                <!-- 配置属性, 目前仅支持 单主表 多子表 结构 -->
                <div id="form" :data-options="JSON.stringify({'tableName':'acquisition_unitprice','formName':'dataForm' ,'primaryKey':'Acquisition_Unit_Price_SerialNumber'})">
                    <div :data-options="JSON.stringify({'tableName':'acquisition_unitprice_mapping_trading','formName':'Trading_SerialNumber' ,'parentTableName':'acquisition_unitprice'})"></div>
                    <div :data-options="JSON.stringify({'tableName':'acquisition_unitprice_mapping_payment','formName':'Payment_Method_SerialNumber' ,'parentTableName':'acquisition_unitprice'})"></div>
                    <div :data-options="JSON.stringify({'tableName':'acquisition_unitprice_mapping_shipment','formName':'Shipment_Method_SerialNumber' ,'parentTableName':'acquisition_unitprice'})"></div>
                    <div :data-options="JSON.stringify({'tableName':'acquisition_unitprice_mapping_transport','formName':'Transport_Method_SerialNumber' ,'parentTableName':'acquisition_unitprice'})"></div>
                    <!-- 新增子表：分阶段付款方案（求购） -->
                    <div :data-options="JSON.stringify({'tableName':'acquisition_unitprice_staged_payment','formName':'staged_payment' ,'parentTableName':'acquisition_unitprice'})"></div>
                </div>
                <div class="table_titel">
                    <div class="titel">基础信息</div>
                </div>
                <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">求购商品</div>
                            </template>
                            <el-form-item prop="Article_SerialNumber" :rules="[{ required: true, message: '请选择求购商品', trigger: 'change' }]">
                                <el-select :disabled="action=='View'" v-model.trim="dataForm.Article_SerialNumber" placeholder="请选择求购商品" style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in article_info" :key="index" :label="item.Article_Name" :value="item.Article_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">求购总量</div>
                            </template>
                            <el-form-item prop="Total_Quantity" :rules="[{ required: true, message: '请输入求购总量', trigger: 'blur' }]">
                                <el-input :disabled="action=='View'" @input="Input_Total_Quantity" type="number" v-model.trim="dataForm.Total_Quantity" placeholder="请输入求应总量"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">最低购买量</div>
                            </template>
                            <el-form-item prop="Start_Quantity" :rules="[{ required: true, message: '请输入最低购买量', trigger: 'blur' }]">
                                <el-input-number :disabled="action=='View'" :min="0" :max="Number(dataForm.Total_Quantity)" v-model.trim="dataForm.Start_Quantity" placeholder="请输入最低购买量"></el-input-number>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">步长</div>
                            </template>
                            <el-form-item prop="Unit_Quantity" :rules="[{ required: true, message: '请输入步长', trigger: 'blur' }]">
                                <el-input-number :disabled="action=='View'" :min="0" :max="Number(dataForm.Total_Quantity)" v-model.trim="dataForm.Unit_Quantity" placeholder="请输入步长"></el-input-number>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">期望单价（元）</div>
                            </template>
                            <el-form-item prop="Unit_Price" :rules="[{ required: true, message: '请输入期望单价', trigger: 'blur' }]">
                                <el-input :disabled="action=='View'" type="number" v-model.trim="dataForm.Unit_Price" placeholder="请输入期望单价"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">单位</div>
                            </template>
                            <el-form-item prop="Article_Unit_SerialNumber" :rules="[{ required: true, message: '请选择单位', trigger: 'change' }]">
                                <el-select :disabled="action=='View'" v-model.trim="dataForm.Article_Unit_SerialNumber" placeholder="请选择单位" style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in article_unit" :key="index" :label="item.Unit" :value="item.Article_Unit_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">联系人</div>
                            </template>
                            <el-form-item prop="Contacts" :rules="[{ required: true, message: '请输入联系人', trigger: 'blur' }]">
                                <el-input :disabled="action=='View'" v-model.trim="dataForm.Contacts" placeholder="请输入联系人"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">联系电话</div>
                            </template>
                            <el-form-item prop="Contacts_Phone" :rules="[{ required: true, message: '请输入联系电话', trigger: 'blur' }, { validator: phoneValidator, trigger: 'blur' }]">
                                <el-input :disabled="action=='View'" v-model.trim="dataForm.Contacts_Phone" placeholder="请输入联系电话"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">收货地址</div>
                            </template>
                            <el-form-item prop="CountyNumber" :rules="[{ required: true, message: '请选择收货地址', trigger: 'change' }]">
                                <el-cascader :disabled="action=='View'" @change="changeCity" v-model.trim="dataForm.CountyNumber" filterable
                                    :props="{label:'name',value:'code',emitPath:false}" :options="city" clearable
                                    placeholder="请选择地址" style="width: 100%;"></el-cascader>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">详细地址</div>
                            </template>
                            <el-form-item prop="Detailed_Address" :rules="[{ required: true, message: '请输入详细地址', trigger: 'blur' }]">
                                <el-input :disabled="action=='View' || !dataForm.CountyNumber" v-model.trim="dataForm.Detailed_Address" placeholder="请输入详细地址" />
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item :span="2">
                            <template slot="label">
                                <div class="cell-item required">所属企业</div>
                            </template>
                            <el-form-item prop="Enterprise_Info_SerialNumber" :rules="[{ required: true, message: '请选择所属企业', trigger: 'change' }]">
                                <el-select :disabled="action=='View'" v-model.trim="dataForm.Enterprise_Info_SerialNumber" placeholder="请选择所属企业" style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in enterprise_info" :key="index" :label="item.Enterprise_Name" :value="item.Enterprise_Info_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item :span="2">
                            <template slot="label">
                                <div class="cell-item">补充条款</div>
                            </template>
                            <el-form-item prop="Supplementary_Provisions" >
                                <el-input :disabled="action=='View'" type="textarea" :autosize="{ minRows: 4}" v-model.trim="dataForm.Supplementary_Provisions" placeholder="可输入补充条款"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">补充说明</div>
                            </template>
                            <el-form-item prop="Supplementary_Explanation">
                                <el-input :disabled="action=='View'" type="textarea" :autosize="{ minRows: 4}" v-model.trim="dataForm.Supplementary_Explanation" placeholder="可输入补充说明"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
                <div class="table_titel">
                    <div class="titel">交易方式</div>
                </div>
                <el-form :model="transaction" ref="form" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">可支持付款类型</div>
                            </template>
                            <el-form-item prop="Trading_SerialNumber" :rules="[{ required: true, message: '请选择付款类型', trigger: 'change' }]">
                                <el-select :disabled="action=='View'" @change="onTradingChange" multiple v-model.trim="transaction.Trading_SerialNumber" placeholder="请选择付款类型" style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in trading" :key="index" :label="item.Trading_Name" :value="item.Trading_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">可支持支付方式</div>
                            </template>
                            <el-form-item prop="Payment_Method_SerialNumber" :rules="[{ required: true, message: '请选择支付方式', trigger: 'change' }]">
                                <el-select :disabled="action=='View'" @change="changeChildDataForm($event, 'Payment_Method_SerialNumber')" multiple v-model.trim="transaction.Payment_Method_SerialNumber" placeholder="请选择支付方式" style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in payment_method" :key="index" :label="item.Payment_Method" :value="item.Payment_Method_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">可支持装运方式</div>
                            </template>
                            <el-form-item prop="Shipment_Method_SerialNumber" :rules="[{ required: true, message: '请选择装运方式', trigger: 'change' }]">
                                <el-select :disabled="action=='View'" @change="changeChildDataForm($event, 'Shipment_Method_SerialNumber')" multiple v-model.trim="transaction.Shipment_Method_SerialNumber" placeholder="请选择装运方式" style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in shipment_method" :key="index" :label="item.Shipment_Method" :value="item.Shipment_Method_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">可支持运输方式</div>
                            </template>
                            <el-form-item prop="Transport_Method_SerialNumber" :rules="[{ required: true, message: '请输入运输方式', trigger: 'change' }]">
                                <el-select :disabled="action=='View'" @change="changeChildDataForm($event, 'Transport_Method_SerialNumber')" multiple v-model.trim="transaction.Transport_Method_SerialNumber" placeholder="请选择运输方式" style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in transport_method" :key="index" :label="item.Transport_Method" :value="item.Transport_Method_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
                <!-- 阶段/全额均显示阶段表 -->
                <div v-if="showStageTable" style="margin-top: 12px;">
                    <div style="margin-bottom:8px;color:#606266;">分阶段付款方案（总比例需为 100%）：</div>
                    <el-table :data="stagePayments" border size="small" style="width: 100%">
                        <el-table-column v-if="isFullSelected" label="选择阶段" width="120">
                            <template slot-scope="scope">
                                <el-radio v-model="fullPayStage" :label="scope.row.stage" @change="handleFullStageChange"></el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stage" label="阶段" width="120"></el-table-column>
                        <el-table-column label="金额比（%）" width="160">
                            <template slot-scope="scope">
                                <el-input :disabled="action=='View' || isFullSelected" v-model.trim="scope.row.percent" @input="onPercentInput($event, scope.row)" placeholder="例如：20" />
                            </template>
                        </el-table-column>
                        <el-table-column label="天数(天)" width="220">
                            <template slot-scope="scope">
                                <el-input :disabled="action=='View' || (isFullSelected && fullPayStage !== scope.row.stage)" v-model.trim="scope.row.payTime" placeholder="请输入天数，如：7" />
                            </template>
                        </el-table-column>
                        <el-table-column label="备注">
                            <template slot-scope="scope">
                                <el-input :disabled="action=='View'" v-model.trim="scope.row.remark" placeholder="可填写说明" />
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="margin-top:6px;color:#909399;">当前总比例：{{ stageTotalPercent }}%</div>
                </div>
            </div>
            <div class="footer">
                <el-button size="medium" @click="handleBack">返回</el-button>
                <el-button v-if="action!='View'"  size="medium" type="primary" plain @click="handleSubmit" :loading="loading">提交</el-button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
</body>

</html>
